<template>
  <div class="container">
    <el-card class="option-card-container">
      <template #header>
        <div class="card-header">
          <span style="font-weight: 600">忘记密码 - 找回密码</span>
        </div>
      </template>
      <el-scrollbar>
        <div class="optino-card-content">
          <div v-for="(option, index) in optinsList" :key="index">
            <a target="_self" :href="option.url" v-if="option.open">
              <div class="optino-card">
                <img
                  class="optino-card-image"
                  width="100"
                  height="100"
                  :src="option.image"
                />
                <div class="optino-card-title">{{ option.title }}</div>

                <div class="optino-card-detail">{{ option.detail }}</div>
              </div>
            </a>
            <a target="_self" v-else>
              <div class="optino-card">
                <img
                  class="optino-card-image"
                  width="100"
                  height="100"
                  :src="option.image"
                />
                <div class="optino-card-title-no">{{ option.title }}</div>
                <div class="optino-card-detail">{{ option.detail }}</div>
              </div>
            </a>
          </div>
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>

<script>
import Top from "../components/sidemenu/Top.vue";
export default {
  data() {
    return {
      optinsList: [
        {
          index: 0,
          title: "邮箱验证",
          url: "/forget/email",
          open: true,
          image: "/src/assets/Mail.png",
          detail: "如果你的账号已经绑定邮箱，通过此处发送验证码重置密码",
        },
        {
          index: 1,
          title: "手机验证（暂未开放）",
          url: "/forget/sms",
          open: false,
          image: "/src/assets/SMS.png",
          detail: "如果你的账号已经绑定手机，通过此处发送短信验证重置密码",
        },
        {
          index: 2,
          title: "动态口令验证（暂未开放）",
          url: "/forget/token",
          open: false,
          image: "/src/assets/token.png",
          detail: "使用微信公众号发送给你的动态口令进行密码重置",
        },
      ],
    };
  },
  components: {
    Top,
  },
};
</script>

<style>
a {
  color: #000000;
  text-decoration: none;
}

* {
  margin: 0;
  padding: 0;
}

.container {
  position: absolute;
  height: auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-card-container {
  /* display: flex;
		background-color: #FFFFFF;*/
  height: 70%;
  width: 80%;
  margin-top: 4rem;
  /* border: 1px solid #d9d9d9; */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.04); */
}

.optino-card-content {
  display: flex;
}

.optino-card-detail {
  text-align: left;
  margin: 3rem 2rem 0 2rem;
  color: #767676;
}

.optino-card-image {
  margin-top: 1rem;
}

.optino-card-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1rem;
  transition: 0.2s;
}

.optino-card-title-no {
  font-size: 1.125rem;
  font-weight: 600;
  margin-top: 1rem;
  color: #838383;
  cursor: default;
  transition: 0.2s;
}

.optino-card {
  width: 350px;
  margin: 0 1.5625rem 1.25rem 1.25rem;
  background-color: #f7f7f7;
  height: 25rem;
  transition: background-color 0.5s;
}

.optino-card:hover {
  background-color: #dedede;
  transition: background-color 0.5s;
}

.optino-card:hover .optino-card-title {
  font-size: 1.375rem;
  transition: 0.2s;
}

.optino-card:hover .optino-card-title-no {
  font-size: 1.375rem;
  transition: 0.2s;
}
</style>
